<html>
  <head>
    <meta charset="utf-8" />
    <title>3D Cube with Drag Rotation</title>
    <style>
      body {
        margin: 0;
        background: linear-gradient(to bottom, #ff69b4, #00bfff);
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .container {
        perspective: 1000px;
        width: 200px;
        height: 200px;
      }

      .cube {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.1s;
      }

      .face {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: rgba(255, 255, 255, 0.2);
        color: white;
        text-align: center;
        line-height: 200px;
        font-size: 18px;
        border: 1px solid rgba(255, 255, 255, 0.3);
        user-select: none; /* 防止文字被选中 */
      }

      /* 正方体六个面的基础位置设置 */
      .front {
        background-image: url('static/img/1.png');
        background-size: cover;
      }
      .back {
        background-image: url('static/img/2.png');
        background-size: cover;
      }
      .left {
        background-image: url('static/img/3.png');
        background-size: cover;
      }
      .right {
        background-image: url('static/img/4.png');
        background-size: cover;
      }
      .top {
        background-image: url('static/img/5.png');
        background-size: cover;
      }
      .bottom {
        background-image: url('static/img/6.png');
        background-size: cover;
      }
      .front {
        transform: translateZ(100px);
      }
      .back {
        transform: rotateY(180deg) translateZ(100px);
      }
      .left {
        transform: rotateY(-90deg) translateZ(100px);
      }
      .right {
        transform: rotateY(90deg) translateZ(100px);
      }
      .top {
        transform: rotateX(90deg) translateZ(100px);
      }
      .bottom {
        transform: rotateX(-90deg) translateZ(100px);
      }

      /* 鼠标拖拽时的旋转效果 */
      .dragging {
        transition: none !important;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="cube" id="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face left"></div>
        <div class="face right"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
    </div>

    <script>
      const cube = document.getElementById('cube')
      let isDragging = false
      let previousX, previousY
      let currentRotationX = 0
      let currentRotationY = 0

      // 鼠标按下事件
      cube.addEventListener('mousedown', (e) => {
        isDragging = true
        previousX = e.clientX
        previousY = e.clientY
        cube.classList.add('dragging')
      })

      // 鼠标移动事件
      cube.addEventListener('mousemove', (e) => {
        if (!isDragging) return

        const deltaX = e.clientX - previousX
        const deltaY = e.clientY - previousY

        // 更新旋转角度
        currentRotationY += deltaX * 0.5 // 水平移动控制绕Y轴旋转
        currentRotationX += deltaY * 0.5 // 垂直移动控制绕X轴旋转

        previousX = e.clientX
        previousY = e.clientY

        updateCubeRotation()
      })

      // 鼠标释放事件
      window.addEventListener('mouseup', () => {
        isDragging = false
        cube.classList.remove('dragging')
      })

      // 应用旋转
      function updateCubeRotation() {
        requestAnimationFrame(() => {
          cube.style.transform = `rotateX(${currentRotationX}deg) rotateY(${currentRotationY}deg)`
        })
      }
    </script>
  </body>
</html>
